<template>
  <FormItem :label="`${itemData.label}：`" :prop="propName">
    <template v-if="itemData.type === 'inputRange'">
      <Row>
        <Col span="10">
        <FormItem :label-for="itemData.valueArr[0].name">
          <div class="qw-form-txt" v-if="itemData.readonly">{{ formData[itemData.valueArr[0].name] }}
          </div>
          <Input v-else v-model="formData[itemData.valueArr[0].name]" :type="itemData.inputType"
            :maxlength="itemData.maxLen?itemData.maxLen:50"
            :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
            :placeholder="itemData.valueArr[0].placeholder" :element-id="itemData.valueArr[0].name"
            @on-change="handleInputChange">
          <span v-if="itemData.valueArr[0].prepend && itemData.valueArr[0].prepend !== ''"
            slot="prepend">{{itemData.valueArr[0].prepend}}</span>
          <span v-if="itemData.valueArr[0].append && itemData.valueArr[0].append !== ''"
            slot="append">{{itemData.valueArr[0].append}}</span>
          </Input>
        </FormItem>
        </Col>
        <Col span="4" class="qw-text-c">-</Col>
        <Col span="10">
        <FormItem :prop="itemData.valueArr[1].name" :label-for="itemData.valueArr[1].name">
          <div class="qw-form-txt" v-if="itemData.readonly">{{ formData[itemData.valueArr[1].name] }}
          </div>
          <Input v-else v-model="formData[itemData.valueArr[1].name]" :type="itemData.inputType"
            :maxlength="itemData.maxLen?itemData.maxLen:50"
            :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
            :placeholder="itemData.valueArr[1].placeholder" :element-id="itemData.valueArr[1].name"
            @on-change="handleInputChange">
          <span v-if="itemData.valueArr[1].prepend && itemData.valueArr[1].prepend !== ''"
            slot="prepend">{{itemData.valueArr[1].prepend}}</span>
          <span v-if="itemData.valueArr[1].append && itemData.valueArr[1].append !== ''"
            slot="append">{{itemData.valueArr[1].append}}</span>
          </Input>
        </FormItem>
        </Col>
      </Row>
    </template>
    <template v-else-if="itemData.type === 'input'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt" v-if="itemData.readonly">{{ formData[itemData.name] }}</div>
        <Input v-else v-model="formData[itemData.name]" :type="itemData.inputType?itemData.inputType :'text'"
          :maxlength="itemData.maxLen?itemData.maxLen:50"
          :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true" :placeholder="itemData.placeholder"
          :disabled="itemData.disabled?itemData.disabled:false" @on-change="handleInputChange" />
      </FormItem>
    </template>
    <template v-else-if="itemData.type === 'textarea'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt" v-if="itemData.readonly">{{ formData[itemData.name] }}</div>
        <Input v-else v-model="formData[itemData.name]" :type="itemData.inputType"
          :maxlength="itemData.maxLen?itemData.maxLen:50"
          :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true" :placeholder="itemData.placeholder"
          @on-change="handleInputChange" />
      </FormItem>
    </template>
  </FormItem>
</template>
<script>
  export default {
    props: {
      itemData: {
        type: Object
      },
      formData: {
        type: Object
      }
    },
    data() {
      return {
        propName: '', // 校验规则名称
        dataList: []
      };
    },
    created() {
      if (this.itemData.type === 'inputRange') {
        this.propName = this.itemData.valueArr[0].name
      } else {
        this.propName = this.itemData.name
      }
    },
    methods: {
      handleInputChange(event) {
        this.$emit('handleChangeFormData', this.formData);
      }
    }
  }
</script>